<template>
	<view class="the-page">
		<uni-row>
			<!-- 搜索 -->
			<uni-search-bar @confirm="onSearch" :focus="true" v-model="query.keyword" placeholder="请输入关键字"
				cancelButton="none">
			</uni-search-bar>

		</uni-row>
		<view class="line-1"></view>
		<!-- <u-sticky offset-top="160"> -->
		<uni-row>
			<!-- 左侧分类 -->
			<uni-col span="5">
				<uni-list>
					<uni-list-item v-for="(item, i) in categoryList" :key="i" :title="item.name" clickable
						@click="onClickLeftMenus(item.id)"></uni-list-item>
				</uni-list>
			</uni-col>
			<!-- 右侧商品列表 -->
			<uni-col span="19">
				<uni-list>
					<!-- 商品卡片列表 -->
					<uni-list-item v-for="(item, i) in goodsList" :key="i" clickable @click="onDetail(item.id)" :border="false"
						:title="item.name" :ellipsis="2" :note="item.spec" :thumb="item.img"
						:rightText="`${item.price}`"></uni-list-item>
				</uni-list>
				<uni-load-more iconType="circle" :status="status" />
			</uni-col>
		</uni-row>
		<!-- </u-sticky> -->
	</view>
</template>

<script>
	//1.导入封装后的接口
	import * as goodsAPI from '@/api/goods.js';
	import * as categoryAPI from '@/api/category.js';

	export default {
		data() {
			return {
				goodsList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表
				pageTotal: 0, //总页数

				//上拉加载控制变量
				status: 'noMore', // more / loading / noMore

				//下拉刷新
				refreshing: false,

				//查询参数
				query: {
					categoryId: null,
					pageNum: 0, //当前页码,页码从1开始计
					pageSize: 8, //页码大小
					keyword: '' //查询关键字
				}
			};
		},

		//生命周期的钩子函数，当实例别创建好了后被调用
		onLoad() {
			//获取所有分类
			categoryAPI.getCategory().then(result => {
				console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.query.categoryId = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh();
			});
		},
		//上拉加载
		onReachBottom() {
			console.log("onReachBottom pageNum", this.query.pageNum)
			this.loadGoodsList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.onRefresh();
			uni.stopPullDownRefresh();
		},

		methods: {
			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(categoryId) {
				this.query.categoryId = categoryId; //更新分类id
				this.onRefresh();
			},

			onDetail(id) {
				uni.navigateTo({
					url: `./goodsDetail?goodsId=${id}`
				});
			},

			loadGoodsList() {
				if (this.status === "noMore") return;

				this.query.pageNum += 1; //页码增加         
				this.status = 'loading';

				goodsAPI.queryPage(this.query).then(result => {
					console.log(result);
					//如果是刷新就商品列表清空
					if (this.refreshing) {
						this.goodsList = [];
						this.refreshing = false;
					}

					//总页数
					this.pageTotal = result.data.pageTotal;
					//数组 拼接
					if (result.data.list.length > 0) {
						this.goodsList = this.goodsList.concat(result.data.list);
					}

					this.status = 'more';
					if (this.query.pageNum >= this.pageTotal) {
						this.status = 'noMore';
					}
				});
			},

			//下拉刷新(初始右侧列表数据)
			onRefresh() {
				// 清空列表数据
				this.query.pageNum = 0; //重置页号
				this.status = 'loadmore';
				this.refreshing = true;
				// 重新加载数据
				this.loadGoodsList();
			},

			// 上拉滚动到底部时触发
			onScrollToLower() {
				console.log("onScrollToLower pageNum", this.query.pageNum)
				this.loadGoodsList();
			},
			//搜索商品
			onSearch() {
				this.onRefresh();
			}
		}
	};
</script>

<style></style>